<template>
    <div class="dashboard-content">
        <el-card shadow="none" :body-style="{padding: '0px'}">
            <div class="card-box clearfix">
                <i class="box-title-icon" :class="content.icon"></i>
                <template>
                    <el-tabs v-model="activeNameNews" class="tabs">
                        <el-tab-pane :label="content.name" name="first">
                            <div class="tabs-content-box">
                                <ul class="link-content">
                                    <li v-for="link in links" class="link-list" :key="link">
                                        <a :href="link.href">
                                            <img :src="link.img" />
                                            <p>{{ link.linkName }}</p>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </template>
                <el-button class="btn-more" type="text">
                    <a class="fontColor" :href="content.url" target="_blank">更多</a>
                </el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    name: 'link-default',
    props: ['content'],
    data () {
        return {
            activeNameNews: 'first',
            links: []
        };
    }
};
</script>

<style>
.dashboard-content .el-card {
    border: none;
}
</style>
<style scoped lang="scss">
.card-box {
    font-size: 18px;
    border: none;

    .link-content {
        padding: 0;

        .link-list {
            list-style: none;
            text-align: center;
            width: 90px;
            float: left;
        }
        p {
            text-align: center;
            color: #333;
            font-size: 14px;
        }
    }
}
</style>